<template>
  <div class="container">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      label-position="left"
      style="padding: 0 10px">
      <div class="c-box">
        <hk-form
          ref="hkFormRef1"
          :form-labels="basicArr"
          :rules="formRules"
          :data="formData"
          :dict-list="dictList"
          :btn-hidden="true">
          <template #filter-groupLogo>
            <div class="group-top-btn">
              <div v-for="item in typeList" :key="item.id">
                <div
                  v-for="item2 in item.ar"
                  :key="item2"
                  class="group-middle"
                  :class="item2 == choseColor ? 'active' : ''">
                  <div :style="{ background: item2 }" class="group-btn" @click="choseBtn(item2)" />
                </div>
              </div>
            </div>
          </template>
          <template #filter-list>
            <div class="hk-flex-column">
              <el-table ref="tableBox" :data="formData.list">
                <el-table-column type="index" label="序号" />
                <el-table-column prop="userId" label="值班人员">
                  <template slot-scope="scope">
                    <el-form-item :prop="'list.' + scope.$index + '.userId'" :rules="formRules.userId">
                      <el-select v-model="scope.row.userId" placeholder="请选择" style="width: 100%">
                        <el-option
                          v-for="item in dictList.userList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value" />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="time" label="排班时间">
                  <template slot-scope="scope">
                    <el-form-item :prop="'list.' + scope.$index + '.time'" :rules="formRules.time">
                      <el-date-picker
                        v-model="scope.row.time"
                        size="small"
                        style="width: 100%; margin: 5px 0 13px"
                        type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm"
                        format="yyyy-MM-dd HH:mm"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :default-time="['08:00:00', '17:00:00']"
                        :picker-options="{
                          format: 'HH:mm',
                        }"
                        @change="changeTime($event, scope)" />
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" @click="handleDelete(scope)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button v-if="title !== '查看'" icon="el-icon-plus" class="add-row" @click="addRow">增加行</el-button>
            </div>
          </template>
        </hk-form>
      </div>
    </el-form>

    <footer>
      <!-- <el-button icon="el-icon-delete" @click="deleteGroup">删除班组</el-button> -->
      <el-button @click="cancel">取 消</el-button>
      <el-button v-if="title !== '查看'" type="primary" @click="submitForm">保 存</el-button>
    </footer>
  </div>
</template>

<script>
import HkForm from '@/components/Hk-Form'
import { getOpUserList, add, edit, editQuery, deleteItem } from '@/api/specialProject/scheduling'
export default {
  components: { HkForm },

  data() {
    return {
      title: '新增',

      // 表单数据
      formData: {
        groupName: '',
        groupLogo: '',
        list: [{ userId: undefined, time: undefined, startTime: '', endTime: '' }],
      },

      // 基础信息
      basicArr: [
        {
          label: '班组名称',
          field: 'groupName',
          type: 'input',
          span: 8,
          maxlength: 50,
        },
        {
          label: '',
          field: '',
          span: 24,
          type: 'slot',
        },
        {
          label: '班组标识',
          field: 'groupLogo',
          span: 24,
          type: 'slot',
        },

        {
          label: '值班信息',
          field: 'list',
          type: 'slot',
          span: 24,
        },
      ],

      // 表单校验
      formRules: {
        groupName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        groupLogo: [{ required: true, message: '不能为空', trigger: 'blur' }],
        userId: [{ required: true, message: '请选择', trigger: 'change' }],
        time: [{ required: true, message: '请选择', trigger: 'change' }],
        list: [{ required: true, message: '请完善内容', trigger: 'blur' }],
      },
      typeList: [
        { id: 1, ar: ['#e163a4', '#d44391', '#b2327b', '#8a2261'] },
        { id: 2, ar: ['#8a5bd7', '#6938c9', '#4c27a4', '#331880'] },
        { id: 3, ar: ['#68ccc8', '#4ca4a7', '#42959a', '#2d6b72'] },
        { id: 4, ar: ['#7bd6a1', '#64bc86', '#4da367', '#367849'] },
        { id: 5, ar: ['#f6c659', '#efaf41', '#ca8a31', '#a46a23'] },
        { id: 6, ar: ['#f3ac56', '#ec903a', '#c6702b', '#a1521e'] },
        { id: 7, ar: ['#ee754a', '#e86033', '#c44524', '#9f2f17'] },
        { id: 8, ar: ['#ec5b56', '#eb4940', '#be2e2c', '#9a2122'] },
        { id: 9, ar: ['#78b7f8', '#5ca8f8', '#4397f7', '#1c51ad'] },
        { id: 10, ar: ['#7791f7', '#5170e7', '#2d52db', '#1b3bad'] },
      ],
      dictList: {
        userList: [],
      },

      loading: false,

      qualificationList: [
        { label: '值班人员', param: 'userId', type: 'select', list: 'userList' },
        { label: '排班时间', param: 'time', type: 'slot' },
      ],

      otherData: {},
      showT: true,
      id: null,
      choseColor: '',
    }
  },
  created() {
    this.title = this.$route.query.title
    this.id = this.$route.query.id
    if (this.title == '修改') {
      this.getDetails(this.id)
    }

    this.getDicts()
  },
  mounted() {},
  methods: {
    getDetails(id) {
      editQuery(id).then((res) => {
        this.formData = res
        this.choseColor = res.groupLogo
        for (var item of this.formData.list) {
          if (item.startTime) {
            var tm = [item.startTime, item.endTime]
            item.time = tm
          }
        }
      })
    },
    choseBtn(e) {
      this.choseColor = e
      this.formData.groupLogo = e
    },
    handleEvent(e) {
      console.log(e, 's')
    },
    //  周期
    changeTime(e, item) {
      console.log(e, item, 'eee')
      this.formData.list[item.$index].startTime = e[0]
      this.formData.list[item.$index].endTime = e[1]
    },
    getDicts() {
      getOpUserList().then((res) => {
        this.dictList.userList = res.map((o) => {
          o.label = o.userName
          o.value = o.id
          return o
        })
      })
    },
    addRow() {
      this.formData.list.push({})
    },
    // 删除单个项
    handleDelete(item) {
      this.formData.list.splice(item.$index, 1)
    },
    deleteGroup() {
      if (this.title === '新增') {
        this.cancel()
      } else {
        deleteItem(this.id).then((res) => {
          this.cancel()
        })
      }
    },
    // 提交事件
    async submitForm() {
      const params = await this.$refs.hkFormRef1.handleFormSubmit('formLabels')
      if (this.title === '新增') {
        add(params).then((res) => {
          this.$message.success('新增成功')
          this.cancel()
        })
      } else {
        edit(params).then((res) => {
          this.$message.success('修改成功')
          this.cancel()
        })
      }
    },
    cancel() {
      this.$router.go(-1)
    },
  },
}
</script>

  <style lang="scss" scoped>
#app.dark-theme {
  .container,
  .tab-content {
    background: transparent !important;
    color: #fff;
  }
  .tab-bg {
    background: rgba(59, 139, 255, 0.1) !important;
  }
  .sp-flex i {
    color: #4b6eef !important;
  }
  .active {
    border: 1px solid #fff !important;
    transform: scale(1.1, 1.1);
  }
}
.group-top-btn {
  display: flex;
  justify-content: flex-start;
  .group-middle {
    padding: 2px;
    margin: 2px;
    border: 1px solid transparent;
    border-radius: 6px;
    .group-btn {
      width: 30px;
      height: 30px;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}
.active {
  border: 1px solid #4b6eef !important;
  transform: scale(1.1, 1.1);
}
.up-txt {
  font-size: 12px;
}
.add-row {
  margin-top: 20px;
}
.container {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.c-box {
  // background: #fff;
  border-radius: 4px;
  padding: 20px;

  margin-bottom: 20px;
}
.el-form {
  flex: 1;
  overflow: auto;
}
footer {
  height: 70px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px;
}

::v-deep {
  .el-button--text {
    padding: 0;
  }

  .el-input-group__append {
    background: transparent;
  }
}
</style>

